<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat Util</title>
<link rel="stylesheet" href="css/amazeui.min.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<script>
	
</script>
<body>
	<div class="box">
		<div class="wechat">

			<div class="sidestrip">
				<div class="am-dropdown" data-am-dropdown>
					<!--头像插件-->
					<div class="own_head am-dropdown-toggle"></div>
					<div class="am-dropdown-content">
						<div class="own_head_top">
							<div class="own_head_top_text">
								<p class="own_name">
									彭于晏丶plus<img src="images/icon/head.png" alt="" />
								</p>
								<p class="own_numb">微信号：jsk8787682</p>
							</div>
							<img src="images/own_head.jpg" alt="" />
						</div>
						<div class="own_head_bottom">
							<p>
								<span>地区</span>江西 九江
							</p>
							<div class="own_head_bottom_img">
								<a href=""><img src="images/icon/head_1.png" /></a> <a href=""><img
									src="images/icon/head_2.png" /></a>
							</div>
						</div>
					</div>
				</div>
				<!--三图标-->
				<div class="sidestrip_icon">
					<a id="si_1"
						style="background: url(images/icon/head_2_1.png) no-repeat;"></a>
					<a id="si_2"></a> <a id="si_3"></a>
				</div>

				<!--底部扩展键-->
				<div id="doc-dropdown-justify-js">
					<div class="am-dropdown" id="doc-dropdown-js"
						style="position: initial;">
						<div class="sidestrip_bc am-dropdown-toggle"></div>
						<ul class="am-dropdown-content" style="">
							<li><a href="#"
								data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">意见反馈</a>
								<div class="am-modal am-modal-no-btn" tabindex="-1"
									id="doc-modal-1">
									<div class="am-modal-dialog">
										<div class="am-modal-hd">
											Modal 标题 <a href="javascript: void(0)"
												class="am-close am-close-spin" data-am-modal-close>&times;</a>
										</div>
										<div class="am-modal-bd">Modal 内容。本 Modal 无法通过遮罩层关闭。</div>
									</div>
								</div></li>

							<li><a href="#">备份与恢复</a></li>
							<li><a href="#">设置</a></li>
						</ul>
					</div>
				</div>
			</div>

			<!--聊天列表-->
			<div class="middle on">
				<div class="wx_search">
					<input type="text" placeholder="搜索" />
					<button>+</button>
				</div>
				<div class="office_text">
					<ul class="user_list"></ul>
				</div>
			</div>

			<!--好友列表-->
			<div class="middle">
				<div class="wx_search">
					<input type="text" placeholder="搜索" />
					<button>+</button>
				</div>
				<div class="office_text">
					<ul class="friends_list">
						<li>
							<p>新的朋友</p>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/1.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">新的朋友</p>
								</div>
							</div>
						</li>
						<li>
							<p>公众号</p>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/2.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">公众号</p>
								</div>
							</div>
						</li>
						<li>
							<p>A</p>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/3.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">彭于晏丶plus</p>
								</div>
							</div>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/4.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">陈依依</p>
								</div>
							</div>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/5.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">毛毛</p>
								</div>
							</div>
						</li>
						<li>
							<p>B</p>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/6.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">苏笑言</p>
								</div>
							</div>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/7.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">往事不再提</p>
								</div>
							</div>
						</li>
						<li>
							<p>C</p>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/8.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">夏继涛</p>
								</div>
							</div>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/9.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">早安无恙</p>
								</div>
							</div>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/10.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">王鹏</p>
								</div>
							</div>
						</li>
						<li>
							<p>D</p>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/11.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">涨了潮了</p>
								</div>
							</div>
							<div class="friends_box">
								<div class="user_head">
									<img src="images/head/12.jpg" />
								</div>
								<div class="friends_text">
									<p class="user_name">Ktz丶中融资</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>

			<!--程序列表-->
			<div class="middle">
				<div class="wx_search">
					<input type="text" placeholder="搜索收藏内容" />
					<button>+</button>
				</div>
				<div class="office_text">
					<ul class="icon_list">
						<li class="icon_active">
							<div class="icon">
								<img src="images/icon/icon.png" alt="" />
							</div> <span>全部收藏</span>
						</li>
						<li>
							<div class="icon">
								<img src="images/icon/icon1.png" alt="" />
							</div> <span>链接</span>
						</li>
						<li>
							<div class="icon">
								<img src="images/icon/icon2.png" alt="" />
							</div> <span>相册</span>
						</li>
						<li>
							<div class="icon">
								<img src="images/icon/icon3.png" alt="" />
							</div> <span>笔记</span>
						</li>
						<li>
							<div class="icon">
								<img src="images/icon/icon4.png" alt="" />
							</div> <span>文件</span>
						</li>
						<li>
							<div class="icon">
								<img src="images/icon/icon5.png" alt="" />
							</div> <span>音乐</span>
						</li>
						<li>
							<div class="icon">
								<img src="images/icon/icon6.png" alt="" />
							</div> <span>标签</span>
						</li>
					</ul>
				</div>
			</div>

			<!--聊天窗口-->
			<div class="talk_window">
				<div class="windows_top">
					<div class="windows_top_box">
						<span id="friend_nickName">&nbsp;</span>
						<ul class="window_icon">
							<li><a href=""><img src="images/icon/icon7.png" /></a></li>
							<li><a href=""><img src="images/icon/icon8.png" /></a></li>
							<li><a href=""><img src="images/icon/icon9.png" /></a></li>
							<li><a href=""><img src="images/icon/icon10.png" /></a></li>
						</ul>
						<div class="extend" class="am-btn am-btn-success"
							data-am-offcanvas="{target: '#doc-oc-demo3'}"></div>
						<!-- 侧边栏内容 -->
						<div id="doc-oc-demo3" class="am-offcanvas">
							<div class="am-offcanvas-bar am-offcanvas-bar-flip">
								<div class="am-offcanvas-content">
									<p>
										<a href="http://music.163.com/#/song?id=385554"
											target="_blank">网易音乐</a>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--聊天内容-->
				<div class="windows_body">
					<div class="office_text" style="height: 100%;">
						<ul class="content" id="chatbox">

						</ul>
					</div>
				</div>

				<div class="windows_input" id="talkbox">
					<div class="input_icon">
						<a href="javascript:;"></a> <a href="javascript:;"></a> <a
							href="javascript:;"></a> <a href="javascript:;"></a> <a
							href="javascript:;"></a> <a href="javascript:;"></a>
					</div>
					<div class="input_box">
						<textarea name="" rows="" cols="" id="input_box"></textarea>
						<button id="send" onclick="send()">发送（S）</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="js/amazeui.min.js"></script>
	<script type="text/javascript" src="js/zUI.js"></script>
	<script type="text/javascript" src="js/jquery.slimscroll.js"></script>
	<script type="text/javascript" src="js/util.js"></script>
	<script type="text/javascript" src="js/wechat.js"></script>

	<script type="text/javascript">
		var chatRecordMap = new Map();

		var currentChatUserId;

		$(function() {
			//windows_body
			initWindowElement();

			//回车发送
			$(document).keydown(function(event) {
				if (event.keyCode == 13) {
					var e = e || event;
					send();
					stopDefaultKey(e)
				}
			});
		});

		function initWindowElement() {
			$(".windows_body").hide();
			$("#talkbox").hide();
			$("#friend_nickName").text("");
			//初始化滚动条
			setScroll();
		}
		function setScroll() {
			$("#chatbox").slimScroll({
				height : "473px",
				wheelStep : 10,
				alwaysVisible : true,
			});
		}

		//三图标
		window.onload = function() {
			function a() {
				var si1 = document.getElementById('si_1');
				var si2 = document.getElementById('si_2');
				var si3 = document.getElementById('si_3');
				si1.onclick = function() {
					si1.style.background = "url(images/icon/head_2_1.png) no-repeat"
					si2.style.background = "";
					si3.style.background = "";
				};
				si2.onclick = function() {
					si2.style.background = "url(images/icon/head_3_1.png) no-repeat"
					si1.style.background = "";
					si3.style.background = "";
				};
				si3.onclick = function() {
					si3.style.background = "url(images/icon/head_4_1.png) no-repeat"
					si1.style.background = "";
					si2.style.background = "";
				};
			}
			;

			function b() {
				var text = document.getElementById('input_box');
				var chat = document.getElementById('chatbox');
				var btn = document.getElementById('send');
				var talk = document.getElementById('talkbox');
				btn.onclick = function() {
					if (text.value == '') {
						alert('不能发送空消息');
					} else {
						chat.innerHTML += '<li class="me"><img src="' + 'images/own_head.jpg' + '"><span>'
								+ text.value + '</span></li>';
						text.value = '';
						chat.scrollTop = chat.scrollHeight;
						talk.style.background = "#fff";
						text.style.background = "#fff";
					}
					;
				};
			}
			;
			a();
			b();
		};

		var webSocket;
		var meUserId = "";
		window.onload = function() {
			var userId = "";
			while (meUserId == undefined || meUserId == '') {
				meUserId = prompt("输入用户ID : ");
			}
			if ('WebSocket' in window) {
				webSocket = new WebSocket(
						"ws://127.0.0.1:9999/bill-websocket-web-chat/websocket?userId=" + meUserId);
			}
			webSocket.onopen = function() {
				console.log("websocket is open....");
			};
			webSocket.onerror = function(e) {
				console.log("websocket is error")
			};
			webSocket.onmessage = function(payload) {
				console.log("websocket is onmessage : " + payload.data)
				var messagePayload = JSON.parse(payload.data);
				var messageType = messagePayload.messageType;

				//在线列表
				if (messageType == 0) {
					var onLineUserList = messagePayload.data;
					for (var i = 0; i < onLineUserList.length; i++) {
						var userId = onLineUserList[i];
						$(".user_list")
								.append(
										'<li class="user_card_li" onclick="clickUserCard(id)" id="user_card_'
												+ userId
												+ '">\n'
												+ '<div class="user_head"><img src="images/head/15.jpg"/></div>\n'
												+ '<div class="user_text"><p class="user_name">'
												+ userId
												+ '</p>\n'
												+ '<p class="user_message">预览消息暂未开发</p></div>\n'
												+ '<div class="user_time">今天</div></li>')

					}
				}
				//上下线通知类型
				if (messageType == 1) {
					var onLineAndOffLineActive = messagePayload.data;
					var type = onLineAndOffLineActive.type;
					var userId = onLineAndOffLineActive.userId;
					//上线
					if (type == '1') {
						var userCard = $("#user_card_" + userId);
						console.log(userCard)
						if (userCard.length == 0) {
							$(".user_list")
									.append(
											'<li class="user_card_li" onclick="clickUserCard(id)" id="user_card_'
													+ userId
													+ '">\n'
													+ '<div class="user_head"><img src="images/head/15.jpg"/></div>\n'
													+ '<div class="user_text"><p class="user_name">'
													+ userId
													+ '</p>\n'
													+ '<p class="user_message">预览消息暂未开发</p></div>\n'
													+ '<div class="user_time">今天</div></li>')
						}
					}
					//下线
					if (type == '0') {
						$("#user_card_" + userId).remove();
					}
				}
				//普通到达消息
				if (messageType == '2') {

					var suff = "user_card_";
					var fromId = messagePayload.from;
					var messageContent = messagePayload.messageContent;

					notify(fromId + "发来一条消息", messageContent);

					var chatRecordOnceBean = {
						"type" : "other",
						"msg" : messageContent,
						"nickName" : fromId
					};

					var chatRecord = chatRecordMap.get(suff + fromId);
					console.log("chatRecord :" + chatRecord);
					if (chatRecord == undefined) {
						chatRecord = [];
						chatRecord.push(chatRecordOnceBean);
						chatRecordMap.set(suff + fromId, chatRecord);
					} else {
						chatRecord.push(chatRecordOnceBean);
						chatRecordMap.set(suff + fromId, chatRecord);
					}
					if (currentChatUserId == (suff + fromId)) {
						var talkElement = '<li class="other"><img src="images/head/15.jpg" title="'+fromId+'"><span>'
								+ messageContent + '</span></li>';
						$("#chatbox").append(talkElement);
					}
				}
			};
		}

		function clickUserCard(id) {
			$(".windows_body").show();
			$("#talkbox").show();
			$("#friend_nickName").text(id);

			console.log("用户选中卡片 : " + id);

			$(".user_list li").each(function() {
				$(this).removeClass("user_active");
			});

			$("#" + id).toggleClass("user_active");

			//获取当前消息窗口
			currentChatUserId = id;

			//加载聊天记录
			setChatRecord(id);

		}
		function setChatRecord(id) {
			console.log("加载聊天记录 : " + id)
			$("#chatbox").empty();
			var bean = chatRecordMap.get(id);
			if (bean != undefined) {
				for (var i = 0; i < bean.length; i++) {
					var type = bean[i].type;
					var msg = bean[i].msg;
					var nickName = bean[i].nickName;
					var talkElement = "";
					if (type == 'me') {
						talkElement = '<li class="me"><img src="images/own_head.jpg" title="'+nickName+'"><span>'
								+ msg + '</span></li>';
					}
					if (type == 'other') {
						talkElement = '<li class="other"><img src="images/head/15.jpg" title="'+nickName+'"><span>'
								+ msg + '</span></li>';
					}
					$("#chatbox").append(talkElement);
				}
			}
		}

		function newMessageBox() {
			var messageBoxHtml = '<div class=\"windows_body\"><div class=\"office_text\" style=\"height: 100%;\">'
					+ '<ul class=\"content\" id=\"chatbox\"></ul></div></div>';
			$(".talk_window").append(messageBoxHtml);
		}
		function send() {
			var content = $("#input_box").val();

			if (content == '') {
				return false;
			}

			var messagePayLoad = {
				"sendType" : "toUser",
				"to" : getRealUserId(currentChatUserId),
				"from" : meUserId,
				"messageContent" : content,
			}

			console.log("发送消息 :" + JSON.stringify(messagePayLoad));

			webSocket.send(JSON.stringify(messagePayLoad));

			var chatRecordOnceBean = {
				"type" : "me",
				"msg" : content,
				"nickName" : meUserId
			};

			var chatRecord = chatRecordMap.get(currentChatUserId);

			if (chatRecord == undefined) {
				chatRecord = [];
				chatRecord.push(chatRecordOnceBean);
				chatRecordMap.set(currentChatUserId, chatRecord);
			} else {
				chatRecord.push(chatRecordOnceBean);
				chatRecordMap.set(currentChatUserId, chatRecord);
			}

			var talkElement = '<li class="me"><img src="images/own_head.jpg" title="'+meUserId+'"><span>'
					+ content + '</span></li>';
			$("#chatbox").append(talkElement);

			//设置滚动条到最底部
			$("#chatbox").slimScroll({
				scrollTo : '9999999999px'
			});

			//设置task 元素颜色
			var talk = document.getElementById('talkbox');
			var text = document.getElementById('input_box');
			talk.style.background = "#fff";
			text.style.background = "#fff";

			//清空输入框
			$("#input_box").val("");
			console.log("当前的聊天记录为 : " + chatRecordMap);
		}
		function stopDefaultKey(e) {
			if (e && e.preventDefault) {
				e.preventDefault();
			} else {
				window.event.returnValue = false;
			}
			return false;
		}
	</script>
</body>
</html>
